<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no">
		<title>解构赋值</title>
		<!-- 引入axios.js文件 -->
		<script src="../js/axios.js"></script>
		<script type="text/javascript">
			//对象的解构赋值
			let person = {name:'tom', age: 20, gender: '男'}
			// 变量名和属性要一致，没有顺序要求
			let { age, name, gender } = person
			//20 "tom" "男"
			console.log(age,name,gender)
			//使用axios的get请求
			 axios.get(
			      'https://api-hmugo-web.itheima.net/api/public/v1/goods/search',
			      {
			        params: {
			          pagenum: 1,
			          pagesize: 20
			        }
			      }
			    ).then(function(xhr) {
			      //请求成功的响应数据xhr,把xhr中的data对象取出，重命名为res
			      // let { data: res } = xhr
			      // console.log(res)
			
			      //把xhr.data中的message属性取出，重命名为res
			      let { message: res } = xhr.data
			      console.log(res)
			    }).catch(function(err) {
			      console.log(err)
			    })
		</script>
		<style>
		    #app {
		      line-height: 100px;
		    }
		
		    #app a {
		      line-height: 100px;
		    }
		
		    #app span {
		      height: 100px;
		      text-indent: 20px;
		      width: 100px;
		    }
		  </style>
	</head>
	<body>
		<!-- 行内元素设置高度,宽不行 -->
		<div id="app">
		  <h1 style="background: red">hello</h1>
		  <hr/>
		  <p style="background: blue">
		    <a href="">world</a>
		  </p>
		  <span style="background: green">span</span>
		</div>
	</body>
</html>
